<!-- dashboard.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
    	 <div class="row justify-content-center">
            <div class="col-md-6"> <!-- 控制表单的宽度为屏幕的60% -->
		        <h1 class="mb-4">在线用户列表</h1>
		        <ul class="list-group" id="userList">
		            <!-- 用户列表项 -->
		        </ul>
		    </div>
		  </div>
    </div>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.1.4/dist/sockjs.min.js"></script>

    <script th:inline="javascript">
	    var stompClient = null;
	
	    function connect() {
	        var socket = new SockJS('/websocket');
	        stompClient = Stomp.over(socket);
	        stompClient.connect({}, function(frame) {
	            stompClient.subscribe('/topic/onlineUsers', function(message) {
	                // 处理在线用户消息
	                var userList = document.getElementById('userList');
	                var listItem = document.createElement('li');
	                listItem.className = 'list-group-item';
	                listItem.textContent = message.body;
	                userList.appendChild(listItem);
	            });
	        });
	    }
	
	    connect();
    </script>
</body>
</html>